<html>
    <head>
        <title>使用组件时绑定class</title>
    </head>
    <body>
        <script>
            
                    // ★、三、用在组件上
                                    
                                // 这个章节假设你已经对 Vue 组件有了一定的了解。 当然你也可以先跳过这里，稍后再回过头来看。

                                /*
                                        当在一个"自定义组件"上使用 class property时，这些Class 将会被添加到"该组件的根元素"上面。
                                        这个元素上已经存在的 class 不会被覆盖
                                */

                                    // 例如： 如果你声明了这个组件：
                                    Vue.component('my-component',{
                                                    template:'<p class="foo bar">Hi </p>'
                                                });

                                            /*
                                                然后在使用它的时候添加一些 class：
                                                 
                                                        <my-component class="baz boo"></my-component>

                                                Html将被渲染为：

                                                        <p class="foo bar baz boo">Hi </p>

                                                对于带有数据绑定的class也同样适用：
                                                         
                                                        <my-component v-bind:class="{ active:isActive}"></my-component>
                                                        当 isActive 为 truth时，HTML将被渲染成为：
                                                        <p class="foo bar active">Hi </p>
                                            */ 
        </script>
    </body>
</html>